import React, { Component } from 'react'
import { Layout } from 'antd'
import { connect } from 'react-redux'
import { toggleCollapseSidebar } from '@/store/actions/app'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
const { Header } = Layout
class MyHeader extends Component{
  toggle = () => {
    this.props.toggleCollapseSidebar(!this.props.sidebarCollapsed)
  }
  render() {
    const { sidebarCollapsed } = this.props
    return (
      <Header style={{ backgroundColor: '#fff', boxShadow: 'rgb(199 204 209) 0px 2px 8px', position: 'relative' }}>
        <div onClick={this.toggle} style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', cursor: 'pointer' }}>
          { sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined /> }
        </div>
        <div style={{ textAlign: 'center', fontSize: '20px' }}>antd component practice</div>
      </Header>
    )
  }
}
export default connect((state) => ({ ...state.app }), { toggleCollapseSidebar })(MyHeader)